<!--入库申请单页面-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!-- CSS 文件 ，不要删，不够自己添加 -->
<link rel="stylesheet" href="../assets/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/bootstrap-table.min.css">
<link rel="stylesheet" href="../assets/css/azzara.min.css">
<link rel="stylesheet" href="../assets/css/demo.css">
<link rel="stylesheet" href="css/buttonlocation.css">
<body>
<div id="app">
    <!--这里选择的是80%的容器，如果需要100%的话，自己修改一下-->
    <div class="container">
        <!--    <h4>您正在做的业务是:库存管理&#45;&#45;入库申请管理&#45;&#45;入库申请登记</h4>-->
        <!--内容在这里面添加就好了-->
        <ul style="display:inline" id="ul">
            <li><button data-target="#myModal" data-toggle="modal" class="btn btn-primary" onclick="getMApply()">添加产品</button></li>
            <li><button id="deleteProduct" class="btn btn-warning" @click="deletedFile()">删除产品</button></li>
            <li><button class="btn btn-secondary" onclick="rukuyulan()">预览</button></li>
        </ul>
        <table style="width: 100%" class="table table-bordered">
            <tr>
                <td colspan="4"><form class="form-inline">出库人:<input type="text" id="storer" class="form-control"></form></td>
                <td colspan="4"><form class="form-inline">出库理由:<select id="reason"  class="form-control ">
                    <option >库存初始</option>
                    <option >赠送</option>
                    <option >类部借领</option>
                    <option >其他借领</option>
                </select></form></td>
            </tr>
            <tr><td colspan="8">&nbsp;</td></tr>
            <tr>
                <td>点选</td>
                <td>产品名称</td>
                <td>产品编号</td>
                <td>描述</td>
                <td>数量</td>
                <td>单价</td>
                <td>成本单位(元)</td>
                <td>小计(元)</td>
            </tr>
            <tbody id="tbody"></tbody>
            <tr><td colspan="8">&nbsp;</td></tr>
            <tr>
                <td colspan="4">总件数:<span id="zjs"></span></td>
                <td colspan="4">总金额(元):<span id="zj"></span></td>
            </tr>
            <tr>
                <td colspan="4">登记人:<span id="my"></span></td>
                <td colspan="4">登记时间:<span id="timer"></span></td>
            </tr>
            <tr align="center">
                <td><span>备注:</span></td>
                <td colspan="7">
                    <textarea class="form-control" aria-label="With textarea" style="margin-top: 0px; margin-bottom: 0px; height: 90px;" id="bz"></textarea>
                </td>
            </tr>
        </table>
        <button style="display: none;float:right" id="tj" class="btn btn-primary" onclick="addsGather()">出库申请提交</button>

    </div>

    <!-- 模态框 -->
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h6 class="modal-title">您正在做的业务是:库存管理&#45;&#45;出库申请管理&#45;&#45;出
                        库申请登记</h6>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- 模态框主体 -->
                <div class="modal-body">
                    <table width="100%" class="table-striped table-bordered table-hover">
                        <tr>
                            <td>产品编号</td>
                            <td>产品名称</td>
                            <td>用途类型</td>
                            <td>成本单价</td>
                            <td>入库</td>
                        </tr>
                        <tr v-for="(dFile,index) in dFileList">
                            <td>{{dFile.productId}}</td>
                            <td>{{dFile.productName}}</td>
                            <td>{{dFile.type? "商品":"物料"}}</td>
                            <td>{{dFile.realCostPrice}}</td>
                            <td><button @click="queryexist(index)">出库</button></td>
                        </tr>
                    </table>
                </div>
                <!-- 模态框底部 -->
                <div class="modal-footer">

                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>

            </div>
        </div>
    </div>
</div>
<!--js用到的包，不够在自己添加-->
<script src="../js/jquery.3.2.1.min.js"></script>
<script src="../js/popper.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/bootstrap-table.min.js"></script>
<script src="../js/bootstrap-table-zh-CN.min.js"></script>
<script src="../js/common.js"></script>
<script src="js/cksqdj.js"></script>
<script src="js/vue.js"></script>
<script src="js/common.js"></script>
<script>
    //添加 删除 思路
    //添加: 点击入库时 把该对象的索引传递出来   根据dFileList[index] 把该对象拼进 tbody 里面
    //     同时 往 indexArray(array) 添加一个数据  this.array.toString().match(index)==null
    //    多次添加同一数据时  判断该index 在 indexArray(array)是否存在 如果存在不添加  否则反之
    //
    //删除: 获取选中的复选框 把该复选框所在的 tr 删除 同时把 indexArray(array)中(携带的复选框value)的该值删除

    //预览:根据 对象集合 与 indexArray(array)索引集合 查询出想要的信息
    let bool = false
    let app = new Vue({
        el:"#app",
        data:{
            dFileList:[],
            array:[],
        },

        methods:{
            queryexist(index){
                //判断该数组集合 是否匹配的到当前下标  匹配不上数组添加值  且 为页面添加对象
                if(this.array.toString().match(index)==null) {
                    this.array.push(index+"")
                    aa(JSON.stringify(this.dFileList[index]),index)
                }
            },
            deletedFile(){
                let ck = $(".checkbox-index:checked");
                if (ck.length==0){
                    alert("请先选择要删除的产品");
                }else{
                    ck.each(function (i,e){
                        let index = array1.indexOf($(e).val());
                        array1.splice(index, 1);
                        $(e).parent().parent().remove();
                        if(bool){
                            rukuyulan2()
                        }

                    })
                }

            }
        },
        created(){
            getCurrentTime();
        }
    })
$(function () {
    $("#tj").disabled=false
})
    //计时器获取当前时间方法
    function getCurrentTime() {
        var countTime = function () {
            date = new Date();
            dateStr = date.toLocaleString();
            document.getElementById("timer").innerHTML = dateStr;
        }
        timer1 = window.setInterval(countTime, 1000);

        $("#my").html(parent.document.getElementsByClassName("user_name")[0].innerHTML)
    }

    let  dFileList1=app.dFileList
    let  array1=app.array

    function getMApply() {
        $.ajax({
            url:"/inputmanagerController/getFile1",
            type:"get",
            contentType: "application/json;charset=UTF-8",
            async: true,
            success:function (data) {
                app.dFileList=data;
            }

        })
    }
    function aa(dFile,index) {
        let parse = JSON.parse(dFile);
        let context="";
        context+="<tr><td>" +
            "<input type='checkbox' value="+index+" class='checkbox-index'>" +
            "</td>" +
            "<td>"+parse.productName+"</td>" +
            "<td>"+parse.productId+"</td>" +
            "<td>"+parse.productDescribe+"</td>" +
            "<td><input type='number' class='zjs' value='1' min='1' onchange='change()'></td>" +
            "<td>"+parse.personalUnit+"</td>" +
            "<td class='realCostPrice'>"+parse.realCostPrice+"</td>" +
            "<td  class='val'></td>" +
            "</tr>"
        $("#tbody").append(context)
        if(bool){
            rukuyulan()
        }

    }

    function change() {
        bool=true
        rukuyulan()
    }

    function rukuyulan() {
       bool = true

        if($("#tbody").html()==""){
            alert("请先添加产品再点击预览")
            return;
        }
        for(let i=0;i<$(".zjs").length;i++){
            if($(".zjs")[i].value<=0){
                alert("数量要大于0")
                return;
            }
            let a = $(".zjs")[i].value
            let b = parseInt($(".realCostPrice")[i].innerText)
            let c=a*b
            document.getElementsByClassName("val")[i].innerText=c
        }


        let val = $(".val");
        let js=$(".zjs")
        let zj=0;
        let zjs=0;
        for (i=0;i<val.length;i++){
            zj=parseInt(zj)+parseInt(val[i].innerHTML);
            zjs=parseInt(zjs)+parseInt(js[i].value);
        }
        $("#zj").html(zj)
        $("#zjs").html(zjs)
        $("#tj").show()
    }
    function rukuyulan2() {
        bool = true
        if($("#tbody").html()==""){
            $("#zj").html("")
            $("#zjs").html("")
            $("#tj").hide()
            //如果产品全删除后  则重新添加产品时把预览效果取消 bool = false
            bool = false
            return;
        }
        for(let i=0;i<$(".zjs").length;i++){
            if($(".zjs")[i].value<=0){
                alert("数量要大于0")
                return;
            }
            let a = $(".zjs")[i].value
            let b = parseInt($(".realCostPrice")[i].innerText)
            let c=a*b
            document.getElementsByClassName("val")[i].innerText=c
        }
        let val = $(".val");
        let js=$(".zjs")
        let zj=0;
        let zjs=0;
        for (i=0;i<val.length;i++){
            zj=parseInt(zj)+parseInt(val[i].innerHTML);
            zjs=parseInt(zjs)+parseInt(js[i].value);
        }
        $("#zj").html(zj)
        $("#zjs").html(zjs)
        $("#tj").show()

    }

</script>
</body>
</html>